<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .container {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .task-card {
            display: flex;
            align-items: center;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .task-card p {
            flex: 1;
            margin: 0 10px;
        }
/*   这个类样式，当你有需要的时候，才创建的     */
        .completed {
            background-color: #eaffea;
            border-color: #8bc34a;
        }

        .delete-btn {
            background-color: #ff6666;
            color: white;
        }

        #counter {
            margin-top: 20px;
            padding: 10px;
            background-color: #f5f5f5;
        }
    </style>
</head>
<!--
    思路分析：
    1.思考效果（UI工程师）
    2.根据效果图去写html结构（需要布局的）
    3.写html内容
    4.写css 第三步和第四步可以同步进行 一块一块写
    5.写交互 
        比如我们在html中需要添加的节点 你先写出来
    (1)添加任务
    （2）点击完成变色
    （3）点击删除卡片（节点）消失
    （4）统计






 -->
<body>
<div class="container">
    <input type="text" id="task-input" placeholder="输入新任务">
    <button id="add-btn">添加任务</button>
    <div id="task-container">
        <!-- <div class="task-card">
            <p>111</p>
        <button id="complete-btn" class="complete-btn">完成</button>
        <button id="delete-btn" class="delete-btn">删除</button>
        </div> -->
    </div>
    
    <div id="counter">总数：0 已完成：0</div>
</div>

<script>
    // 功能一：实现添加
    let addButton = document.getElementById("add-btn");
    // 表单元素
    let addInput = document.getElementById("task-input");
    // 卡片的容器
    let cardContainer = document.getElementById("task-container");
    // 卡片数量
    let counter = document.getElementById("counter");

    // // 获取完成按钮
    // let completeBtn = document.getElementById("complete-btn");
    // // 删除按钮
    // let deleteBtn = document.getElementById("delete-btn");


    // 功能三：做统计

    let statistics = () => {
        // 添加节点后进行统计
        cardContainer = document.getElementById("task-container");
        // 总数：total 
        console.log(cardContainer.children.length);
        let total = cardContainer.children.length
        // console.log(total);
        // 已完成数：completedCount
        let completedCount = document.querySelectorAll(".completed").length;
        // console.log(completedCount);
        // console.log(counter);
        counter.innerText = `总数：${total} 已完成：${completedCount}`;
        // counter.innerText = `总数：${total} 已完成：0`;
    }


    // 添加事件
    addButton.addEventListener("click", (e) => {
        // 创建节点前好做判断，空内容我们不添加新节点
        // 条件：addInput.value.trim() === ""
        // console.log(addInput.value.trim() === "");
        if (addInput.value.trim() === "") {
            return;
        }
        // 创建节点
        let cardDiv = document.createElement("div");
        cardDiv.className = "task-card";
        // 给节点添加内容
        cardDiv.innerHTML = `
            <p>${addInput.value}</p>
            <button class="complete-btn">完成</button>
            <button class="delete-btn">删除</button>
        `;

        // 插入节点
        cardContainer.appendChild(cardDiv);
        // 添加完节点后 输入框的值？
        // addInput.value = "";
        /*
        // 添加节点后进行统计
        // 总数：total 
        console.log(cardContainer.children.length);
        let total = cardContainer.children.length
        // console.log(total);
        // 已完成数：completedCount
        let completedCount = document.querySelectorAll(".completed").length;
        // console.log(completedCount);
        // console.log(counter);
        counter.innerText = `总数：${total} 已完成：${completedCount}`;
        // counter.innerText = `总数：${total} 已完成：0`;
        */
        statistics();
    })


    // 功能二：点击完成和删除
    // 我们想到点击完成和删除按钮都需要添加点击事件,可以使用事件委托
    // 找到对应的父级进行绑定侦听事件

    cardContainer.addEventListener("click", (e) => {
        // closest：根据选择器找到对应的祖先元素或者自身，如果找不到返回null，这个函数对动态增加节点的寻找非常有用
        // 思考：我们怎么点击把完成变成已完成？---》改变类样式 ---》js改变css （改变行内样式，或者改变类名【选择】）---》className（classList 数组 通过数组的方法来实现改变）
        // 思考：怎么判断是完成状态还是已完成状态？---》单分支
        // 难点：点击的元素只要包含complete-btn样式就要改变。----》toggle(): 

        // 思考：我们点击删除怎么删除节点？----》remove
        // 思考：我们怎么判断点击的是删除还是完成？----》event.target
        
        // console.log(e.target.closest(".task-card"));
        let card = e.target.closest(".task-card");
        // console.log(e.target);
        let currentEle = e.target;

        // 可以使用多分支进行优化
        if (currentEle.classList.contains("complete-btn")) {
            currentEle.classList.toggle("completed");
        }

        if (currentEle.classList.contains("delete-btn")) {
            card.remove();
        }
        
        statistics();
        

    })




</script>












</body>
</html>